<template>
    <div class="coupon-manager">
        <unify-header></unify-header>
        <div class="container">
            <div class="wrapper">
                <div class="main">
                    <h2 class="title">
                        <span>礼品卡管理</span>
                    </h2>
                    <div class="inputBox">
                        <div class="operation">
                            <el-input class="in-promo-code" v-model="input" placeholder="请输入礼品卡兑换码"></el-input>
                            <el-button class="btn btn-exchange" @click="exchangeFun" type="danger">兑换</el-button>
                        </div>
                    </div>
                   <div class="giftViewBox">
                       <div class='goftPrice'>
                            <p>礼品卡余额</p>
                            <p>￥{{balance}}</p>
                       </div>
                   </div>
                    <div class="orderList">
                        <ul>
                            <li>
                                <div>
                                    时间
                                </div>
                                <div>
                                    收入/支出
                                </div>
                                <div>
                                    详细说明
                                </div>
                            </li>
                            <li v-for="itmes in dataList">
                                <div>
                                  {{itmes.createDate}}
                                </div>
                                <div>
                                   {{itmes.tradeAmount}}
                                </div>
                                <div>
                                    {{itmes.remarks}}
                                </div>
                            </li>

                        </ul>
                    </div>
                    <el-pagination
                            small
                            layout="prev, pager, next"
                            :total="pageTotal" @current-change="updataCurrentPage">
                    </el-pagination>
                </div>
                <left-menu selected="gifts"></left-menu>
            </div>
        </div>
        <Loading :loadingText="loadingText" :showLoading="showLoading"></Loading>
        <unify-footer></unify-footer>
    </div>
</template>

<script type="text/ecmascript-6">
    import UnifyHeader from 'components/header/header'
    import UnifyFooter from 'components/footer/footer'
    import LeftMenu from 'components/center/menu'
    import Api from '@/api.js'
    import filter from '@/filter.js'
    import Loading from '@/components/component/loading/loading'
    import * as UserAPi from '@/api/user'


    export default {
      filter,
      data: function () {
        return {
          input: '',
          couponData: [],
          dataList: [],
          couponType: {
            all: '全系列产品均可使用'
          },
          page: 1,
          pageTotal: 10,
          loadingText: '加载中...',
          showLoading: true,
          allPrice: 0,
          balance: 0
        }
      },
      methods: {
//          '4beb066ee770494c8949d87a665c35da'
        initCounpon () {
          this.loadingText = '礼品卡获取中...'
          var jsons = {
            passId: localStorage.getItem("userDbId"),
            pageNo: this.page,
            pageSize: 10
          }
          Api.counpon.giftCardList(jsons).then(res => {
            this.allPrice = 0
            this.showLoading = false
            this.dataList = res.data.data.giftcardLogs
            this.pageTotal = res.data.data.recordCount
            for (var i = 0; i < this.dataList.length; i++) {
              this.allPrice += this.dataList[i].tradeAmount
            }
            console.log(res)
          })
          UserAPi.userInfo({
            passId: localStorage.getItem("userDbId")
          }).then(res => {
            if (!res) {
              return
            }
            if (res.status === 'OK') {
              this.balance = (res.data.giftcardBalance / 1).toFixed(2)
            }
          })
        },
        exchangeFun () {
          if (this.input.length > 0) {
            this.showLoading = true
            this.loadingText = '礼品卡兑换中...'
            var jsons = {
              giftcardCode: this.input,
              passId: localStorage.getItem("userDbId")
            }
            Api.counpon.changeGiftCard(jsons).then(
             res => {
               if (res.data.status === "OK") {
                 console.log(res)
                 this.$message({
                   showClose: true,
                   iconClass: "atrup_Message",
                   message: '兑换成功',
                   type: 'success'
                 })
                 this.showLoading = false
                 this.initCounpon()
               } else {
                 this.$message({
                   showClose: true,
                   iconClass: "atrup_Message",
                   message: res.data.message,
                   type: 'success'
                 })
                 console.log(res)
                 this.showLoading = false
               }
             }
			)
          } else {
            this.$message({
              showClose: true,
              iconClass: "atrup_Message",
              message: '请输入兑换码',
              type: 'success'
            })
          }
        },
        updataCurrentPage (currentPage) {
          this.page = currentPage
          this.initCounpon()
        }
      },
      components: {
        UnifyHeader,
        UnifyFooter,
        LeftMenu,
        Loading
      },
      watch: {},
      created: function () {
        for (let i = 0; i < 10; i++) {
          this.couponData.push({
            'isUse': 'Y',
            'couponName': 'all_40',
            'prefeAmount': 40,
            'validStartDate': '2017-03-30',
            'validEndDate': '2017-04-08',
            'isExpire': 'Y',
            'prefeType': 'dixian',
            'couponCode': '3wmPv3lc78HG',
            'productType': 'all'
          })
        }
        this.couponData[3].isUse = 'N'
      },
      mounted() {
        this.initCounpon()
      }
    }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

    .coupon-manager {
        .btn {
            padding: 0 1.6em;
            font-size: 14px;
            line-height: 26px;
            background: #000000;
            border: 0;
            &:hover {
                background: #2b2b2b;
            }
        }
        .wrapper {
            width: 1152px;
            margin: 0 auto;
            overflow: hidden;
        }
        .container {
            padding: 14px 0 92px;
            background: #f1f1f1;
        }
        .main {
            position: relative;
            width: 960px;
            min-height: 668px;
            float: right;
            border-radius: 5px;
            border: 1px solid #dedede;
            background: #f8f8f8;
            h2.title {
                padding-left: 30px;
                font-size: 16px;
                line-height: 55px;
                border-bottom: 1px solid #DEDEDE;
                background-color: #fff;
            }
            .inputBox{
                width:100%;
                background-color: #f8f8f8;
                border:1px solid #dedede;
                height:90px;
                box-sizing: border-box;
            }
            .operation {
                width:680px;
                margin: 26px auto;

            }
            .in-promo-code {
                display: inline-block;
                width: 570px;
                input {
                    &:-ms-input-placeholder {
                        text-align: center;
                    }
                    &::-webkit-input-placeholder {
                        text-align: center;
                    }
                }
            }
            .btn-exchange {
                line-height: 36px;
            }
            .coupon-list {
                width: 892px;
                padding: 10px 34px 0;
            }
            .coupon-container {
                width: 916px;
                font-size: 0;
            }
            .el-pagination {
                text-align: center;
                margin: 20px 0 40px;
                button:hover {
                    color: #a00912;
                }
                .el-pager li:hover {
                    color: #a00912;
                }
                .number {
                    padding: 0 15px;
                    font-size: 14px;
                }
                .number.active {
                    border-color: #fff;
                    background-color: #fff;
                    color: #a00912;
                }
            }
            .giftViewBox{
                width:100%;
                height:120px;
                background-color: #ffffff;
                position: relative;
                .goftPrice{
                    width:240px;
                    height:100px;
                    position: absolute;
                    top:0;
                    left:0;
                    right:0;
                    bottom:0;
                    margin: auto auto;
                    text-align: center;
                    >p:first-child{
                        font-size: 18px;
                        line-height: 24px;
                        margin-top:30px;
                    }
                    >p:nth-child(2){
                        font-size: 22px;
                        color: red;
                        font-weight: 600;

                    }
                }
            }
            .orderList{
                width:100%;
                min-height:300px;
                margin-top:15px;
                border-top:1px solid #cccccc;
                >ul{
                    >li{
                        width:100%;
                        height:44px;
                        border-bottom: 1px solid #cccccc;
                        background: #ffffff;
                        display: flex;
                        >div{
                            flex:3;
                            box-sizing: border-box;
                            padding-left:40px;
                            line-height: 44px;
                            font-size:14px;

                        }

                    }
                    >li:nth-of-type(2n){
                        background-color: #fbfbfb;
                    }
                    >li:first-child{
                        >div{
                            font-weight: 600;
                        }
                    }
                }
            }

        }

    }



</style>
